<template>
  <div class='simple-template-body'>
    <div class="simple-draw-layout">
      <div class="graphArea" v-if="edit">
        <div
            class="DRAGELE"
            draggable="true"
            data-shape="rect"
        >
          <div class="shape" style="display:block;background-color:rgba(220,220,220,1);border-radius: 5px;"></div>
        </div>
        <!-- <div
            class="DRAGELE"
            draggable="true"
            data-shape="circle"
        >
            <div class="shape" style="display:block;background-color:rgba(220,220,220,1);border-radius: 100%;"></div>
        </div>
        <div
            class="DRAGELE"
            draggable="true"
            data-shape="diamond"
        >
            <div class="shape" style="display:block;background-color:rgba(220,220,220,1);transform:rotate(45deg) scale(0.75);"></div>
        </div> -->
      </div>
      <div
          class="container"
          id="container"
          style="flex:1;width:100%;height:100%;"
      ></div>
    </div>
  </div>
</template>

<script>
import SimpleDraw from "./huitu";
export default {
  name: '',
  data() {
    return {
    }
  },
  props: {
    canvasData:{
      type:Object,
      default(){
        return null
      }
    },
    edit:{
      type:Boolean,
      default:true
    },
    scale:{
      type:Boolean,
      default:true
    }
  },
  watch:{
    canvasData:{
      handler(newValue){
        if(newValue && this.Draw){
          this.Draw.clear();
          this.Draw.render(JSON.parse(JSON.stringify(newValue)));
        }
      },
      immediate:true
    }
  },
  components: {},
  mounted() {
    this.Draw = new SimpleDraw();
    this.Draw.option({
      el: 'container',
      scale:this.scale,
      edit:this.edit
    })
    this.Draw.on("delete",(param)=>{
      return this.delete(param);
    })
    this.Draw.on("click",(event,param)=>{
      this.click(event,param);
    })
    this.Draw.on("create",(param)=>{
      return this.create(param);
    })
    if(this.canvasData){
      this.Draw.clear();
      this.Draw.render(JSON.parse(JSON.stringify(this.canvasData)));
    }
  },
  methods: {
    delete(param){
      this.boolean = true;
      return this.$emit('delete',param,(boolean)=>{ //父组件通过调用callback，来禁止删除
        this.boolean = boolean || false
      }).boolean
    },
    click(event,param){
      this.$emit('click',{
        event:event,
        detail:param
      })
    },
    create(param){
      this.boolean = true;
      return this.$emit('create',param,(boolean)=>{ //父组件通过调用callback，来禁止创建
        this.boolean = boolean || false
      }).boolean
    },
    changeCoreLabel(id,label){
      this.Draw.changeCoreLabel(id,label);
    },
    changeAttribute(type,id,attr,value){
      // type:core || line,
      // id:id
      //attr:attr,
      //value:value
      this.Draw.changeAttribute(type,id,attr,value);
    },
    getResult(){
      return this.Draw.getResult()
    }
  },
}
</script>

<style lang="scss">
@font-face {
  font-family: "icon-font";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}

.icon-font {
  font-family: "icon-font" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-suofang:before {
  content: "\e61f";
}

.icon-zitiyanse:before {
  content: "\e646";
}

.icon-colorSelector:before {
  content: "\e63c";
}

.icon-T-juyou:before {
  content: "\e71d";
}

.icon-T-juzuo:before {
  content: "\e71e";
}

.icon-T-juzhong:before {
  content: "\e71f";
}

.icon-jushang:before {
  content: "\e6a5";
}

.icon-juxia:before {
  content: "\e6a6";
}

.icon-juzhong:before {
  content: "\e6a7";
}

.icon-V:before {
  content: "\e6e6";
}

.icon-lianjie:before {
  content: "\e754";
}

.icon-setting:before {
  content: "\e784";
}

.icon-shanchu:before {
  content: "\e69b";
}

.simple-draw-layout {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #DCDFE6;
  box-shadow: 0 0px 2px 0 rgba(0,0,0,0.1);
  position: relative;
  .graphArea {
    width: 40px;
    background-color: #F5F7FA;
    box-sizing: border-box;
    padding: 5px;

    .DRAGELE {
      width: 30px;
      height: 30px;
      margin-bottom: 10px;

      .shape {
        width: 100%;
        height: 100%;
      }
    }
  }
  .range {
    input[type=range] {
      /*input外壳样式*/

      -webkit-appearance: none;

      border-radius: 10px;

      height: 6px;

      z-index: 10;
      outline: none;
      cursor: pointer;
    }

    input[type=range]::-webkit-slider-runnable-track {
      /*轨道*/

      height: 6px;

      background: rgba(0, 0, 0, 0.2);

      border-radius: 10px;

    }

    input[type=range]::-webkit-slider-thumb {
      /*滑块*/

      -webkit-appearance: none;

      height: 10px;

      width: 10px;

      margin-top: -2px;

      background: #1890ff !important;

      border-radius: 100%;
      transition: all 300ms ease;
      &:hover{
        transform: scale(1.2);
      }
    }
  }
}

.simple-draw-space {
  .work-space {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: visible;
    will-change: transform;

    .svg-space {
      .svg-line-g:hover {
        path {
          stroke: red !important;
        }
        .line_under{
          stroke: rgba(0, 0, 0, 0.3) !important;
        }
        marker {
          path {
            stroke: #fff;
            fill: red !important;
          }
        }
      }
    }

    .core {
      position: absolute;
      outline: none;

      .setting,
      .delete {
        display: none;
      }

      .icon-font {
        cursor: pointer;
        padding: 5px;
        color: #999;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        display: block;
      }

      .control-bar {
        position: absolute;
        bottom: 99%;
        left: 50%;
        transform: translateX(-50%);
        padding-bottom: 10px;
        display: none;

        ul {
          list-style: none;
          padding: 0;
          margin: 0;
          background-color: #f1f1f1;
          display: flex;
          align-items: center;
          border-radius: 2px;
        }

        li {
          cursor: pointer;
        }

        &:after {
          content: "";
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border: 10px solid transparent;
          border-top-color: #f1f1f1;
        }
      }

      .setting:hover {
        .control-bar {
          display: block;
        }
      }

      &:hover {
        .setting,
        .delete {
          display: block;
        }
      }
      &.active{
        box-shadow: 0 0 5px #ef7272;
        border-radius: 5px;
      }
    }

    .dot-line {
      position: absolute;
      z-index: 1;

      span {
        position: absolute;
        width: 1px;
        height: 1px;
        border-radius: 100%;
      }

      .top {
        top: 0;
        left: 50%;
      }

      .right {
        right: 0;
        top: 50%;
      }

      .bottom {
        bottom: 0;
        left: 50%;
      }

      .left {
        left: 0;
        top: 50%;
      }
    }
  }
}

.simple-draw-context-menu {
  border: 1px solid #dedede;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  padding: 10px;
  background-color: #fff;
  z-index: 10;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      font-size: 15px;
      line-height: 32px;
      padding: 0 5px;
      cursor: pointer;
      display: flex;
      align-items: center;

      svg {
        width: 14px;
        height: 14px;
        margin-right: 10px;
      }
    }

    li+li {
      border-top: 1px solid #dedede;
    }
  }
}

.draw-line-ing {

  .core-label,
  .core {
    pointer-events: none;
  }

  .dot-line {
    span {
      pointer-events: none;
    }

    &.dragenter {
      box-shadow: 0 0 5px #58cbf7;
    }
  }
}
</style>
